const text = document.querySelectorAll(".header .text")
const slider = document.querySelector(".header .slider")
const completed = document.querySelector(".completed")
const topActive = document.querySelector(".topActive")
const topActiveImg = document.querySelector(".topActive img")
const loading = document.querySelector(".loading")
let current = 0
new AlloyFinger(document.body, {
	swipe: function (evt) {
		if (evt.direction == "Down") {
			topActive.style.height = 150 / 37.5 + "rem"
			topActiveImg.style.height = 150 / 37.5 + "rem"
			topActiveImg.style.opacity = 1
			load()
			current == 0 && getLocationData()
		}
		if (evt.direction == "Up") {
			closeActive()
		}
	}
})

// 关闭刷新动画
function closeActive() {
	topActive.style.height = 0
	topActiveImg.style.height = 0
	topActiveImg.style.opacity = 0
}

text.forEach(function (item, index) {
	item.addEventListener("touchstart", function () {
		document.querySelector(".selected1").classList.remove("selected1")
		item.classList.add("selected1")
		slider.style.width = item.offsetWidth / 37.5 + "rem"
		slider.style.transform = `translateX(${(item.offsetLeft - 31.5) / 37.5}rem)`
		completed.style.opacity = index == 2 ? 1 : 0
		document.body.style.paddingTop =
			index == 2 ? 147 / 37.5 + "rem" : 50 / 37.5 + "rem"
		current = index
		load()
	})
})

const bottomStyle = document.querySelectorAll(".bottomStyle div a")
bottomStyle.forEach(function (item) {
	item.addEventListener("click", function () {
		document.querySelector(".redSel").classList.remove("redSel")
		item.classList.add("redSel")
	})
})

const toPickedUp = document.querySelector(".toPickedUp")
let LocationData = []

// 重新加载列表
getLocationData()
function getLocationData() {
	LocationData = JSON.parse(localStorage.getItem("deliveryInfo"))
	toPickedUp.innerHTML = ""
	LocationData.forEach(function (item, index) {
		current == 0 && item.Status == 0
			? (toPickedUp.innerHTML += toPickedUpListStr(
					item.taskNumber,
					item.isDelay ? 1 : 0,
					item.actualAddress,
					item.deliveryAddress,
					"提货时间",
					item.pickupTime,
					"提货"
			  ))
			: ""
		current == 1 && item.Status == 1
			? (toPickedUp.innerHTML += toPickedUpListStr(
					item.taskNumber,
					item.isDelay ? 1 : 0,
					item.actualAddress,
					item.deliveryAddress,
					item.isDeliver ? "交货时间" : "提货时间",
					item.pickupTime,
					item.isDeliver ? "回车登记" : "交付"
			  ))
			: ""
		current == 2 && item.Status == 2
			? (toPickedUp.innerHTML += toPickedUpListStr(
					item.taskNumber,
					item.isDelay ? 1 : 0,
					item.actualAddress,
					item.deliveryAddress,
					"提货时间",
					item.pickupTime,
					"提货"
			  ))
			: ""
	})
	toReadTask()
}

// 跳转详情页
function toReadTask() {
	const toPickedUpList = document.querySelectorAll(
		".toPickedUp .list .footerDate .btn"
	)
	toPickedUpList.forEach(function (item, index) {
		item.addEventListener("touchstart", function () {
			if (item.innerText == "提货")
				location.href = `../module01/readyTask.html?id=${index}`
			else if (item.innerText == "交付")
				location.href = `../module01/taskingDetails.html?id=${index}`
			else location.href = `../module02/record.html?id=${index}`
		})
		if (current == 2) {
			item.style.display = "none"
			document
				.querySelectorAll(".toPickedUp .list .titleNum .btn")
				.forEach(function (item2) {
					item2.style.display = "none"
				})
		}
	})
}

// 列表字符串拼接
function toPickedUpListStr(
	teskNum,
	opacityNum,
	startAddressStr,
	endAddressStr,
	pickGoodsMsg,
	pickGoodsTime,
	btnText
) {
	return `
		<!-- 单个列表 -->
		<div class="wrapper list">
			<!-- 头部 任务编号 -->
			<div class="titleNum">
				<h3>任务编号：<span id="teskNum">${teskNum}</span></h3>
				<span class="btn" style="opacity: ${opacityNum};">已延迟</span>
			</div>
			<!-- 中部 地址 -->
			<div class="middleAddress">
				<!-- 左侧图标 -->
				<div class="leftImg">
					<p class="startImg">起</p>
					<p class="line">---</p>
					<p class="endImg">止</p>
				</div>
				<!-- 右侧文字 -->
				<div class="rightText">
					<p id="startAddress">
						${startAddressStr}
					</p>
					<p id="endAddress">${endAddressStr}</p>
				</div>
			</div>
			<!-- 底部 提货时间 -->
			<div class="footerDate">
				<div class="time">
					<p>${pickGoodsMsg}</p>
					<span id="pickGoodsTime">${pickGoodsTime}</span>
				</div>
				<a href="javascript:;" class="btn">${btnText}</a>
			</div>
		</div>`
}

// 加载动画并刷新
function load() {
	loading.style.opacity = 0.5
	setTimeout(function () {
		loading.style.opacity = 0
		closeActive()
		getLocationData()
	}, 2000)
}

// 点击我的
mineBtn.addEventListener("touchstart", function () {
	location.href = "./home.html"
})
//点击消息
informationBtn.addEventListener("touchstart", function () {
	location.href = "../module02/message.html"
})

const taskNum = document.querySelector(".completed .taskNum")
taskNum.addEventListener("input", function () {
	document.querySelectorAll(".toPickedUp .list").forEach(function (item) {
		item.style.opacity =
			item.children[0].children[0].children[0].innerText.includes(taskNum.value)
				? 1
				: 0
		item.style.height =
			item.children[0].children[0].children[0].innerText.includes(taskNum.value)
				? 230 / 37.5 + "rem"
				: 0
	})
})

/* 
-------------------
*/

const line = document.querySelector(".selected .line")
const topScope = line.offsetTop
const middleScope = topScope + line.offsetHeight / 2
const bottomScope = topScope + line.offsetHeight
//滑动选择年月
const selectedList = document.querySelectorAll(".selected .listbox .list ul")
Transform(selectedList[0])
new AlloyFinger(selectedList[0], {
	pressMove: function (evt) {
		selectedList[0].translateY += evt.deltaY
		selectedList[0].translateY < -288 && (selectedList[0].translateY = -288)
		selectedList[0].translateY > 96 && (selectedList[0].translateY = 96)
	}
})
Transform(selectedList[1])
new AlloyFinger(selectedList[1], {
	pressMove: function (evt) {
		selectedList[1].translateY += evt.deltaY
		selectedList[1].translateY < -432 && (selectedList[1].translateY = -432)
		selectedList[1].translateY > 96 && (selectedList[1].translateY = 96)
	}
})

let timeSetYears = "2023"
let timeSetMonths = "9月"
const yearsList = document.querySelectorAll(
	".selected .listbox .list .years li span"
)
const monthsList = document.querySelectorAll(
	".selected .listbox .list .months li span"
)
let num = 1
selectedList[0].addEventListener("touchmove", function () {
	num = parseInt(
		(96 - selectedList[0].translateY) / parseInt(400 / yearsList.length)
	)
	yearsList.forEach(function (item, index) {
		item.style.color = index == num ? "#000" : "#c2c1c1"
		item.style.fontSize = index == num ? 25 / 37.5 + "rem" : 16 / 37.5 + "rem"
		timeSetYears = index == num ? item.innerText : timeSetYears
	})
})

selectedList[0].addEventListener("touchend", function () {
	selectedList[0].translateY = -num * parseInt(450 / yearsList.length) + 96
})

selectedList[1].addEventListener("touchmove", function () {
	num = parseInt(
		(96 - selectedList[1].translateY) / parseInt(550 / monthsList.length)
	)
	monthsList.forEach(function (item, index) {
		item.style.color = index == num ? "#000" : "#c2c1c1"
		item.style.fontSize = index == num ? 25 / 37.5 + "rem" : 16 / 37.5 + "rem"
		timeSetMonths = index == num ? item.innerText : timeSetMonths
	})
})

selectedList[1].addEventListener("touchend", function () {
	selectedList[1].translateY = -num * parseInt(590 / monthsList.length) + 96
})

const start = document.querySelector(".completed div .start")
const end = document.querySelector(".completed div .end")
const cancel = document.querySelector(".selected .title .cancel")
const selected = document.querySelector(".selected")
const screenMask = document.querySelector(".screenMask")
let who = true
start.addEventListener("click", function () {
	selected.style.opacity = 1
	selected.style.zIndex = 2
	selected.style.transform = "translateY(0)"
	screenMask.style.opacity = 1
	screenMask.style.zIndex = 1
	who = true
})
end.addEventListener("click", function () {
	selected.style.opacity = 1
	selected.style.zIndex = 2
	selected.style.transform = "translateY(0)"
	screenMask.style.opacity = 1
	screenMask.style.zIndex = 1
	who = false
})
cancel.addEventListener("click", function () {
	selected.style.opacity = 0
	selected.style.transform = "translateY(100%)"
	screenMask.style.opacity = 0
	screenMask.style.zIndex = -1
})
//确认选择日期
yes.addEventListener("touchstart", function () {
	const d =
		timeSetYears + "." + timeSetMonths.substring(0, timeSetMonths.length - 1)
	who ? (start.innerText = d) : (end.innerText = d)

	selected.style.opacity = 0
	selected.style.transform = "translateY(100%)"
	screenMask.style.opacity = 0
	screenMask.style.zIndex = -1
})

const timeSpan = document.querySelectorAll(
	".toPickedUp .list .footerDate .time span"
)
const btn = document.querySelector(".completed div .btn")
btn.addEventListener("touchstart", function () {
	const startTime = new Date(start.innerText).getTime()
	const endTime = new Date(end.innerText).getTime()
	document
		.querySelectorAll(".toPickedUp .list .footerDate .time span")
		.forEach(function (item) {
			item.parentNode.parentNode.parentNode.style.opacity = 0
			startTime <= new Date(item.innerText).getTime() &&
				endTime >= new Date(item.innerText).getTime() &&
				(item.parentNode.parentNode.parentNode.style.opacity = 1)
		})
})
